<template>
  <border-box title="附加信息(至少一项)">
    <div v-for="(item,index) in list" :key="index">
      <div class="item">
        <a-input class="item-half" placeholder="选项名称" v-model="item.itemName"></a-input>
        <a-select v-model="item.itemType" style="width:100px">
          <a-select-option value="1">文本</a-select-option>
          <a-select-option value="2">单选按钮</a-select-option>
          <a-select-option value="3">多选按钮</a-select-option>
          <a-select-option value="4">图片</a-select-option>
          <a-select-option value="5">文件上传</a-select-option>
        </a-select>
        <a-icon @click="deleteLast" class="item-icon" type="minus-circle"
                style="margin-left:5px;color:red;font-size:20px;"/>
      </div>
      <div v-if="item.itemType=='2'||item.itemType=='3'">
        <a-tag class="tag" v-for="(tag,tagIndex) in item.itemValueList"
               :key="index+'_'+tagIndex" closable
               @close="handleCloseTag(index,tagIndex)">
          {{tag.valueName}}
        </a-tag>
        <a-input style="width: 120px"
                 v-on:keyup.enter="tagClickThis($event,item)"
                 @blur="tagClickThis($event,item)"
                 v-model="item.inputText"
                 placeholder="请输入选项值"/>
      </div>
    </div>
    <a-button type="dashed" @click="add" style="display:inherit;margin: 10px auto 0">
      <a-icon type="plus" class="item-icon" style="color:#1890ff;font-size:20px;"/>
      新增附加信息
    </a-button>
  </border-box>
</template>

<script>
  //活动的附件信息
  import BorderBox from "./BorderBox";
  import {getAction} from "@/api/manage";

  export default {
    name: "ActivityAdditionalInfo",
    components: {BorderBox},
    props: ['params'],
    data() {
      return {
        list: [],
        current: {
          itemName: '',
          itemType: '1',
          itemValueList: [],
          inputText: ''
        }
      }
    },
    created() {
      this.queryInfo();
    },
    methods: {
      tagClickThis(e, item) {
        if (e.target.value) {
          item.itemValueList.push({
            valueName: e.target.value
          });
          item.inputText = ""
        }
      },
      handleCloseTag(index, tagIndex) {
        this.list[index].itemValueList.splice(tagIndex, 1);
      },
      queryInfo() {
        getAction('activity/activityInfo/queryActivityAddition', this.params).then(res => {
          if (res.success) {
            res.result.map(item => {
              item.itemType = item.itemType.toString();
              item.inputText = ''
            });
            this.list = res.result || [];
          }
        })
      },
      selfValidate() {
        return new Promise((resolve, reject) => {
          const res = this.list.filter(item => item.itemName && item.itemType);
          if(res.length===0){
            reject("至少添加一项附加信息，否则活动报名不成功")
          }else{
            resolve({key: 'activityAddition', value: res})
          }
        })
      },
      deleteLast() {
        this.list.pop();
      },
      add() {
        this.list.push({
          itemName: '',
          itemType: '1',
          itemValueList: [],
          inputText: ''
        });
      }
    }
  }
</script>

<style scoped>
  .item {
    display: flex;
    align-items: center;
  }

  .item-half {
    flex: 1;
    margin-right: 5px;
  }

  .item-icon {
    cursor: pointer;
  }

  .tag {
    /*padding: 0 0 10px 10px;*/
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
  }

</style>